import axios from "axios"
import { useEffect, useState } from "react"

interface gs {
    gathe: boolean
    setGather: any
}
function FF({ gathe, setGather }: gs) {
    const [list1, setList1] = useState<{ lgname: string, cid: number,nums:number }[]>([]);
    //这是实现的反向数据流
    function upGathe() {
        setGather(false)
    }
    //这里是初始化获取输入框的值
    const [textss, setText] = useState<string>('')
    //点击这里就会创建一个美集
    const [list, setList] = useState<{ num: number, nickname: string }[]>([]);
    const [ishowfla, setShow11] = useState<boolean>(true)
    async function saveLgname() {
        let lgname = textss; //获取灵感的内容
        //后端使用人session
        let uid = 2;
        let res = await axios.post('http://127.0.0.1:81/saveLgang', {
            lgname,
            uid
        })
        return res.data;
    }
    useEffect(function () {
        getLang()
    }, [])
    //获取灵感的内容
    function getLang() {
        let uid = 2;
        axios.get('http://127.0.0.1:81/getLang', {
            params: { uid }
        })
            .then(function (res) {
                console.log(res.data.results);
                setList1(res.data.results);
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    async function addHiddle() {
        if (ishowfla) {
            setShow11(false)
        }
        let lg = await saveLgname()
        setText('')
        getLang()
    }
    // 切换的创作好的内容
    function changz() {
        if (!ishowfla) {
            setShow11(true)
        }
    }
    function addHiddle1(){
        if (ishowfla) {
            setShow11(false)
        }  
    }
    return (
        <div>
            <div className="modaloverlay">
                <div className="modaldata" >
                    <div className="ModelMain">
                        <div className="Xcms" onClick={upGathe}>X</div>
                        <div className="ModelMain1">创建新灵感集</div>
                        <div>
                            <div className="ModelMain2" style={{ display: (ishowfla ? 'block' : 'none') }}><input value={textss} onChange={(e: any) => { setText(e.target.value) }} className="nameMain" type="text" placeholder="灵感集名称" /></div>
                            <div className="listCHUANJ" style={{ display: (ishowfla ? 'none' : 'block') }}>
                                {
                                    list1.map((item) => {
                                        return (
                                            <>
                                                <div key={item.cid} className="listSmu">
                                                    
                                                         <div className="listitem" >{item.lgname}</div>
                                                        <div className="listnum">{item.nums} <span>添加作品</span></div>
                                                   
                                                    <div className="listsave"><span>添加</span></div>


                                                </div>

                                            </>

                                        )
                                    })
                                }


                            </div>
                        </div>
                        <div className="ModelMain3">
                            <div className="CHUANjianMAIN1" style={{ display: (ishowfla ? 'none' : 'block') }} onClick={changz}>创建新灵感集</div>
                            <div >
                                <div className="CHUANjianMAIN2" style={{ display: (ishowfla ? 'block' : 'none') }} onClick={addHiddle1} >返回</div>
                                <div className="CHUANjianMAIN3" style={{ display: (ishowfla ? 'block' : 'none') }} onClick={addHiddle}>确认创建</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div >

    )
}
export default FF